iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
1
Modern Web

TypeScript + React + 雜七雜八系列 第 29

【Day 29】Puppeteer

  • 分享至 

  • xImage
  •  

大家好,今天的篇章要介紹的是 Puppeteer,前幾天都是單元測試,component 測試,最後想要玩一波 E2E 測試,不過在真的寫測試之前,這一篇算是會先介紹 Puppeteer 的函式庫,可能得稱它為爬蟲?而後才會結合 Jest 進行測試

本篇會新開一個空白的專案目錄來進行,筆者認為 E2E 所需要寫的程式碼完全不依賴開發環境上的所有函式庫,所以獨立一個即可


Puppeteer

Puppeteer 是一個 Node 庫,它提供了 API 來通過 DevTools 協議控制 Chrome 或 Chromium

我能做什麼?
您可以在瀏覽器中手動執行的大多數操作都可以使用 Puppeteer 完成!以下是一些入門示例:

  • 頁面的螢幕截圖和 PDF
  • 搜尋 SPA(單頁應用程序)並生成預渲染的內容(即 "SSR" (服務器端渲染))
  • 自動執行表單提交,UI測試,鍵盤輸入等
  • 創建最新的自動化測試環境。使用最新的 JavaScript 和瀏覽器功能,直接在最新版本的 Chrome 中運行測試。
  • 捕獲時間線跟踪 您的網站以幫助診斷性能問題。
  • 測試 Chrome 擴展程序。

以上為抄 官方文件 得來的


新建一個空白專案吧,筆者的資料夾名稱取為 typescript-puppeteer-practice,不過名稱依各位自己的喜好即可

安裝配置 ts-node 的環境,要用來執行 .ts 檔

npm i -D ts-node typescript
+ tsconfig.json

這個我是拿前幾天用專案內的複製來用,只有改到一個地方,ts-node 原本在執行 import 語法時會錯,所以修改成這個

{
  "compilerOptions": {
    "target": "es5",
-   "module": "ESNext",
+   "module": "commonjs",
    // "lib": [],

package.json 的 scripts 要新增

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "start": "ts-node"
  },

這樣就能用 ts-node 直接 run .ts 檔了

不過還有其它雜七雜八的東西想裝,像是 ESLint,只是用來檢查 coding style

npx install-peerdeps --dev eslint-config-airbnb-base
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
+ .eslintrc.js

然後就可以新增一個簡單的 puppeteer 使用範例

+ src/launch.ts

這邊只是單純的開啟無頭瀏覽器,然後馬上單純的關閉

執行的話會看到什麼也沒發生 @@

npm run start -- src/launch.ts

改掉一些程式碼來讓瀏覽器能夠看得到

再執行一次

npm run start -- src/launch.ts

執行結果

確定可以運作了


接下來要撰寫一份自動操作表單用的 code

要拿來玩的頁面是這一頁 https://littlehorseboy.github.io/typescript-react/dist/#/

  1. 對 input 輸入值
  2. 按下 登入
  3. 按下 示範表單 切換 router

  1. 輸入姓名
  2. 輸入年齡
  3. 下拉選單選擇 male
  4. Radio Button 選擇
  5. Checkbox 選擇
  6. Submit 送出

要做的動作大概是這樣,寫成 puppeteer 的程式碼

+ src/typescript-react-formik.ts

npm run start -- src/typescript-react-formik.ts

執行結果


以上就是用 puppeteer 來做填寫表單的使用範例,按照 puppeteer 的官方文件來說,應該是只要是你有辦法用手動的方式操控瀏覽器達到的事情,那麼用 puppeteer 也幾乎都能夠做到

這一篇 typescript 的存在感挺薄弱的 XD

最後附上原始碼
https://github.com/littlehorseboy/typescript-puppeteer-practice/tree/day29-puppeteer


明天要讓 Puppeteer 搭配 Jest 來實現 E2E 測試


上一篇
【Day 28】React Testing Library
下一篇
【Day 30】Jest Puppeteer
系列文
TypeScript + React + 雜七雜八30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言